【CSS】background-repeat - 背景画像のリピート

CSSのbackground-repeatプロパティについて解説します。

検証環境

CSS

macOS

14.1

background-repeat

background-repeatは“背景画像のリピート”のプロパティです。

基本構文

background-repeat: x軸値 y軸値;

値

代表的な値は次の通りです。

値	意味
repeat	繰り返し。 ※ 幅が不足する場合、はみ出し部分は切り取り。
no-repeat	繰り返しなし。
repeat-x	x軸（横）に繰り返し。 ※ 幅が不足する場合、はみ出し部分は切り取り。
repeat-y	y軸（縦）に繰り返し。 ※ 幅が不足する場合、はみ出し部分は切り取り。
space	要素のサイズに収まる限り繰り返し。 ※ スペースは均等に配置。
round	繰り返す。 ※ 幅が不足する場合、画像を拡大・縮小してスペースに収納。

サンプル

repeat

sample.html

<style>
p {
    color: silver;
    font-size: 1.5rem;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-repeat/hacker-commandline.jpeg');
    ___ih_hl_start
    background-repeat: repeat;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets.<br>
    CSS is a programming language<br>
    that decorates elements such as HTML and XML.<br>
    You can set various properties<br>
    such as text color, background, and size.
</p>

プレビュー

no-repeat

sample.html

<style>
p {
    color: silver;
    font-size: 1.5rem;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-repeat/hacker-commandline.jpeg');
    ___ih_hl_start
    background-repeat: no-repeat;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets.<br>
    CSS is a programming language<br>
    that decorates elements such as HTML and XML.<br>
    You can set various properties<br>
    such as text color, background, and size.
</p>

プレビュー

repeat-x

sample.html

<style>
p {
    color: silver;
    font-size: 1.5rem;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-repeat/hacker-commandline.jpeg');
    ___ih_hl_start
    background-repeat: repeat-x;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets.<br>
    CSS is a programming language<br>
    that decorates elements such as HTML and XML.<br>
    You can set various properties<br>
    such as text color, background, and size.
</p>

プレビュー

repeat-y

sample.html

<style>
p {
    color: silver;
    font-size: 1.5rem;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-repeat/hacker-commandline.jpeg');
    ___ih_hl_start
    background-repeat: repeat-y;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets.<br>
    CSS is a programming language<br>
    that decorates elements such as HTML and XML.<br>
    You can set various properties<br>
    such as text color, background, and size.
</p>

プレビュー

space

sample.html

<style>
p {
    color: silver;
    font-size: 1.5rem;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-repeat/hacker-commandline.jpeg');
    ___ih_hl_start
    background-repeat: space;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets.<br>
    CSS is a programming language<br>
    that decorates elements such as HTML and XML.<br>
    You can set various properties<br>
    such as text color, background, and size.
</p>

プレビュー

round

sample.html

<style>
p {
    color: silver;
    font-size: 1.5rem;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-repeat/hacker-commandline.jpeg');
    ___ih_hl_start
    background-repeat: round;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets.<br>
    CSS is a programming language<br>
    that decorates elements such as HTML and XML.<br>
    You can set various properties<br>
    such as text color, background, and size.
</p>

プレビュー